import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import {withRouter} from "react-router-dom"
import "./Tabbar.scss"
class TabBarExample extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedTab: 'redTab',
        hidden: false,
        fullScreen: true,
      };
    }
    render() {
      return (
        <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#ff0000"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title="首页"
              key="index"
              icon={<i className="iconfont icon-shouye"></i>}
              selectedIcon={<i className="iconfont icon-shouye"></i>}
              selected={this.props.location.pathname === '/'}
              onPress={() => {
                this.props.history.push("/")
              }}
            >
              {this.props.location.pathname === '/'&&this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={<i className="iconfont icon-fenlei"></i>}
              selectedIcon={<i className="iconfont icon-fenlei"></i>}
              title="分类"
              key="category"
              selected={this.props.location.pathname === '/category'}
              onPress={() => {
              this.props.history.push("/category")
              }}
              >
              {this.props.location.pathname === '/category'&&this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={<i className="iconfont icon-gouwuche"></i>}
              selectedIcon={<i className="iconfont icon-gouwuche"></i>}
              title="购物车"
              key="cart"
              selected={this.props.location.pathname === '/cart'}
              onPress={() => {
                this.props.history.push("/cart")
              }}
            >
              {this.props.location.pathname === '/cart'&&this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={<i className="iconfont icon-wode"></i>}
              selectedIcon={<i className="iconfont icon-wode"></i>}
              title="我的"
              key="my"
              selected={this.props.location.pathname === '/my'}
              onPress={() => {
             this.props.history.push("/my")
              }}
            >  {this.props.location.pathname === '/my'&&this.props.children}
            </TabBar.Item>
          </TabBar>
        </div>
      );
    }
  }
  export default withRouter(TabBarExample)